const path =require("path");
const htmlWebpackPlugin=require("html-webpack-plugin")
// path是node原生模块,用来拼接路径
module.exports={
    // 配置出入口文件
    entry:{
        app:path.resolve(__dirname,"./src/main.js")
    },
    // 执行webpack命令会自动生成dist目录
    output:{
      	//自动生成
        path:path.resolve(__dirname,"./dist"),
        filename:"js/bundle.js",
        //配置完插件使用这个路径,
        filename:"js/bundle.js"
    },
    plugins:[
        new htmlWebpackPlugin({
        title:"React", //可是设置title
        filename:"index.html",  //自定生成index.js根据出口文件走
        
        //如果我们需要自己引入第三方库 rest.css,animate.js   
        //title优先级更高    
        template:"./src/index.html"   //也可预先配置一个html模板
        }),
    ],
    module: {
        rules: [ 
            {
                test: /\.(css|scss)$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /\.(js|jsx)$/,
                use: {
                    loader:"babel-loader",
                    options:{
                        presets:["@babel/env", "@babel/react"]
                    }
                }
            },
            {
                //将css文件匹配到先解析css 再将css插入到style中，写法从右往左写
                test:/\.(png|jpg|gif|woff|svg|eot|woff2|ttf)$/,
                    // 8*1024 多少字节限制8K以上直接输出文件，以下的base64
                use:{
                    loader:'url-loader',
                    options: {
                        limit: 8192,   // 小于 8kb的图片转换为base64编码,减少http请求
                      }
                }
            }
                 ]
        }  
       
}